<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-30 13:48:11
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-23 16:47:02
 * @FilePath: \my-project\src\views\CreateListBiz\components\fieldList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-form :model="form" ref="form" label-position="top">
    <div v-for="(row, index) in form.list" :key="index" style="display: flex;gap: 10px;">
      <el-form-item prop="prop" :label="index ? '': '字段名'" :rules="dynamicRule({ row, index})" style="width: 160px;">
        <el-input v-model="row.prop"></el-input>
      </el-form-item>
      <el-form-item prop="fieldType" :label="index ? '': '字段类型'" :rules="dynamicRule({ row, index })" style="width: 160px;">
        <el-select v-model="row.fieldType" style="width:100%">
          <el-option v-for="t in filedTypes" :value="t" :label="t"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="label" :label="index ? '': '字段中文标签'" :rules="dynamicRule({ row, index })" style="width: 160px;">
        <el-input v-model="row.label"></el-input>
      </el-form-item>
      <el-form-item prop="columnType" :label="index ? '': '表格列类型'" :rules="dynamicRule({ row, index })">
        <div style="display: flex;gap: 10px;align-items: center;">
          <el-checkbox v-model="row.table"/>
          <el-select v-model="row.columnType" style="width: 100%;">
            <el-option v-for="t in paramsTypes" v-bind="t"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item prop="filterType" :label="index ? '': '搜索类型'" :rules="dynamicRule({row, index})">
        <div style="display: flex;gap: 10px;align-items: center;">
          <el-checkbox v-model="row.filter" style="margin-left: 20px;margin-top: 5px;"/>
          <el-select v-model="row.filterType" style="width: 100%;">
            <el-option label="输入框" value="input"></el-option>
            <el-option label="选择器" value="select"></el-option>
            <el-option label="时间选择器" value="dateTimePicker"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item prop="formType" :label="index ? '': '表单类型'" :rules="dynamicRule({row, index})">
        <div style="display: flex;gap: 10px;align-items: center;">
          <el-checkbox v-model="row.form" style="margin-left: 20px;margin-top: 5px;"/>
          <el-select v-model="row.formType" style="width: 100%;">
            <el-option v-for="i in types" :label="i.label" :value="i.value"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item :label="index ? '': '操作'">
        <el-button v-if="row.filter || row.table || row.form" type="primary" icon="el-icon-setting">设置</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="handleDelete(i)">删除</el-button>
      </el-form-item>
    </div>
    <el-button type="danger" icon="el-icon-delete" @click="submit">验证</el-button>
  </el-form>
</template>

<script>
import elFormItems from '@/utils/formUtils'
export default {
  data() {
    return {
      form: {
        list: [],
      },
      rowStyle:{
        border: 'none'
      },
      cellStyle:{
        border: 'none',
        padding: '0px'
      },
      types: elFormItems,
      filedTypes: ['varchar', 'int', 'tinyint', 'float', 'double', 'bigint', 'decimal', 'chart', 'blob', 'text', 'mediumtext', 'longtext'],
      paramsTypes: [
        { label: '文本列', value: 'string' },
        { label: '数字列', value: 'number' },
        { label: '日期列', value: 'date' },
        { label: '链接列', value: 'link' },
        { label: '标签列', value: 'tag' },
      ]
    }
  },
  methods: {
    async submit() {
      try {
        await this.$refs.form.validate()
      } catch (error) {
        console.log(error)
      }
    },
    dynamicRule({index}) {
      return {
        trigger: 'change',
        validator: (rule, value, callback) => {
          const { field } = rule
          const val = this.form.list[index][field]
          const {table, filter,form} = this.form.list[index]
          if (field === 'prop') {
            if (!val) return callback('必填')
            if (!/^[a-z]+$/.test(val)) return callback('请输入纯小写英文')
            const items = this.form.list.filter(i => i.prop === val)
            if (items.length > 1) return callback('已存在请重新填')
          } else if (!val && field === 'fieldType') {
            return callback('必选')
          } else if (!val && field === 'label') {
            return callback('必填')
          } else if (!val && field === 'columnTyp' && table) {
            return callback('必选')
          } else if (!val && field === 'filterType' && filter) {
            return callback('必选')
          } else if (!val && field === 'formType' && form) {
            return callback('必选')
          }
          callback()
        }
      }
    },
    setData(data) {
      if (data && data.length) {
        this.form.list = data
      }
    },
    handleClick() {
      this.form.list.push({
        label: '字段' + (this.form.list.length + 1),
        prop: 'key' + 'abcdefghijklmgopqrstuvwxyz'.charAt(this.form.list.length),
        fieldType: 'varchar',
        table: true,
        columnType: 'string',
        filter: false,
        form: true,
        formType: 'input'
      })
    },
    handleDelete(index) {
      this.form.list.splice(index, 1)
    },
    columnTypeChange(i) {
      const { columnType } = this.form.list[i]
      let data = { ...this.form.list[i] }
      if (columnType === 'action') {
        data = {
          label: '操作',
          table: true,
          filter: false,
          form: false,
          columnType: 'action'
        }
      }
      if (['select', 'radio', 'checkbox'].includes(columnType)) {
        data.options = [
          { label: '选项1', value: 'value1' },
          { label: '选项2', value: 'value2' },
        ]
      }
      this.form.list[i] = data
    }
  }
}
</script>

<style lang="scss" scoped>
.mb14 {
  margin-bottom: 14px;
}

.ssss {
  display: flex;
  align-items: center;
  width: 100%;
  .mb14:first-child {
    margin-right: 10px;
  }
  .mb14:last-child {
    flex: 1;
  }
}
</style>